<template>
	<div id="commodity">

		<!-- <el-table :data="FruitData.filter(data=> !Fruit_Search || data.name.toLowerCase().includes(Fruit_Search.toLowerCase()))" style="width: 100%"> -->
		<el-table :data="FruitData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
			<el-table-column label="Id" prop="id"></el-table-column>
			<el-table-column label="Name" prop="name"></el-table-column>
			<el-table-column label="Subtitle" prop="subtitle"></el-table-column>
			<el-table-column label="Price" prop="price"></el-table-column>

			<!--操作列-->
			<el-table-column align="right">
				<template slot="header" slot-scope="">
					<el-input v-model="Fruit_Search" size="mini" placeholder="输入关键字搜索" />
				</template>

				<!--更新/删除商品-->
				<template slot-scope="scope">
					<el-button size="mini" @click="showUpdate(scope.$index, scope.row)">更新商品</el-button>
					<el-button size="mini" type="danger" @click="goodDelete(scope.$index, scope.row)">删除商品</el-button>
					<!--更新表单-->
					<el-dialog title="更新商品" :visible.sync="updateVisible" style="float: left;">
						<!--表单内容-->
						<el-form :model="update_goods">
							<el-form-item label="商品id" :label-width="formLabelWidth">
								<el-input v-model="update_goods.id" autocomplete="off" disabled="disabled"></el-input>
							</el-form-item>

							<el-form-item label="名称" :label-width="formLabelWidth">
								<el-input v-model="update_goods.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="价格" :label-width="formLabelWidth">
								<el-input v-model="update_goods.price" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="库存" :label-width="formLabelWidth">
								<el-input v-model="update_goods.stock" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="简介" :label-width="formLabelWidth">
								<el-input v-model="update_goods.subtitle" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="状态" :label-width="formLabelWidth">
								<el-switch v-model="update_goods.categoryId"></el-switch>
							</el-form-item>
						</el-form>
						<!--表单按钮-->
						<div slot="footer" class="dialog-footer">
							<el-button @click="updateVisible = false">取 消</el-button>
							<el-button type="primary" @click="updateGood">确 定</el-button>
						</div>
					</el-dialog>
				</template>

			</el-table-column>

		</el-table>
		<!--insert新增商品-->
		<!-- <template> -->
		<div>
			<el-button type="text" @click="insertGoodsVisible = true">新增商品</el-button>
			<el-dialog title="新增商品" :visible.sync="insertGoodsVisible" width="30%">
				<el-form ref="form" :model="insertGoods" label-width="80px">
					<el-form-item label="名称">
						<el-input v-model="insertGoods.name"></el-input>
					</el-form-item>
					<el-form-item label="价格">
						<el-input v-model="insertGoods.price"></el-input>
					</el-form-item>
					<el-form-item label="副标题">
						<el-input v-model="insertGoods.subtitle"></el-input>
					</el-form-item>
					<el-form-item label="库存">
						<el-input v-model="insertGoods.stock"></el-input>
					</el-form-item>
					<!-- <el-form-item label="种类">
								<el-input v-model="insertGoods.categoryId"></el-input>
							</el-form-item> -->
					<el-form-item label="状态" :label-width="formLabelWidth">
						<el-switch v-model="update_goods.categoryId"></el-switch>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="insertGoodsVisible = false">取 消</el-button>
					<el-button type="primary" @click="insertGood">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<!-- </template> -->
		<div class="block">
			<el-pagination
			@size-change="handleSizeChange" 
			@current-change="handleCurrentChange" 
			:current-page="currentPage"
			:page-sizes="[7, 14, 20, 30, 40]" 
			:page-size="pagesize" 
			:total="FruitData.length" 
			layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
	</div>
</template>



<script>
	export default {
		name: "commodity",
		mounted() {
			var that = this;
			this.axios({
				method: "get",
				url: "http://47.115.152.5:8080/manage/product/list.do", //查看所有接口
				withCredentials: true, //跨域请求 在跨域请求时，会携带用户凭证
			}).then(function(res) {
				that.FruitData = res.data.data.list;
				console.log(that.FruitData.length);
				//console.log(res.data);
			});
			
		},
		data() {
			return {
				// cookie: '', 
				FruitData: [],
				update_goods: { //更新商品表单
					id: '',
					price: '',
					name: '',
					subtitle: '',
					stock: '',
					categoryId: '',
					// price: ''
				},
				deleteId: '',
				deletekey: '', //被删除设备的索引
				editVisible: false, //修改设备弹出框
				formLabelWidth: '120px',
				dialogVisible: false, //添加设备弹出框
				search: '',
				Fruit_Search: '',
				paydata_Search: '',
				cookie: '', //保存登录信息
				updateVisible: false, //更新商品弹出框
				insertGoods: { //插入商品表单
					price: '',
					name: '',
					subtitle: '',
					stock: '',
					categoryId: '0'
				},
				insertGoodsVisible: false,
				tips: [
					"修改设备信息失败",
					"添加设备失败",
					"删除设备失败",
					"删除商品失败",
					"用户名或密码错误",
					"商品更新失败",
					"商品新增失败",
					"修改设备信息成功", //7
					"添加设备成功",
					"删除设备成功",
					"删除商品成功",
					"登录成功", //11
					"更新商品成功",
					"新增商品成功"
				],
				currentPage: 1,
				pagesize: 7,
			}
		},
		methods: {
			handleSizeChange: function(val) {
				this.pagesize = val;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
			},
			showUpdate(key, keyPath) { //展示要更新的商品信息  update_goods
				this.updateVisible = true;
				this.update_goods.id = keyPath.id;
				this.update_goods.price = keyPath.price;
				this.update_goods.name = keyPath.name;
				this.update_goods.subtitle = keyPath.subtitle;
				this.update_goods.stock = keyPath.stock;
				this.update_goods.categoryId = keyPath.categoryId;
				
			},
			goodDelete(key, keyPath) { //删除商品   更新了tips
				var that = this;
				that.deleteId = keyPath.id;
				this.axios({
					method: 'POST',
					url: 'http://47.115.152.5:8080/manage/product/delete.do',
					params: {
						productId: that.deleteId
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status == 0) {
						that.sp();
						that.susTips(10);
					} else {
						that.errTips(3);
					}
				});
			},
			updateGood() { //更新商品信息  update_goods
				var that = this;
				that.updateVisible = false; //点击取消和确定按钮后不可见
				//console.log(that.update_goods.id, that.update_goods.name, that.update_goods.price, that.update_goods.subtitle, that.update_goods.stock, that.update_goods.categoryId);
				this.axios({
					method: 'POST',
					url: 'http://47.115.152.5:8080/manage/product/save.do',
					params: {
						id: that.update_goods.id,
						name: that.update_goods.name,
						price: that.update_goods.price,
						subtitle: that.update_goods.subtitle,
						stock: that.update_goods.stock,
						categoryId: Number(that.update_goods.categoryId),
						// price: that.update_goods.price
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status === 0) {
						that.sp();
						that.susTips(12);
					} else {
						that.errTips(5);
					}
				});
				that.update_goods.id = '';
				that.update_goods.name = '';
				that.update_goods.price = '';
				that.update_goods.subtitle = '';
				that.update_goods.stock = '';
				that.update_goods.categoryId = '';
				that.update_goods.price = '';
			},
			insertGood() { //新增商品   insertGoods
				var that = this;
				that.insertGoodsVisible = false;
				//console.log(that.insertGoods.name, that.insertGoods.price, that.insertGoods.subtitle, that.insertGoods.stock, that.insertGoods.categoryId);
				this.axios({
					method: 'POST',
					url: 'http://47.115.152.5:8080/manage/product/save.do',
					params: {
						name: that.insertGoods.name,
						price: that.insertGoods.price,
						subtitle: that.insertGoods.subtitle,
						stock: that.insertGoods.stock,
						categoryId: Number(that.insertGoods.categoryId),
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status === 0) {
						that.sp();
						that.susTips(13);
					} else {
						that.errTips(6);
					}
				});
				that.insertGoods.name = "",
					that.insertGoods.price = "",
					that.insertGoods.subtitle = "",
					that.insertGoods.stock = "",
					that.insertGoods.categoryId = ""
			},
			sp: function() {
				var that = this;
				this.axios({
						method: "get",
						url: "http://47.115.152.5:8080/manage/product/list.do",
						withCredentials: true,
					})
					.then(function(res) {
						that.FruitData = res.data.data.list;
						console.log(res.data.data.list);

					})
			},
			errTips(option) { //错误信息提示
				this.$notify.error({
					title: '错误',
					message: this.tips[option]
				});
			},
			susTips(option) { //成功信息提示
				this.$notify({
					title: '成功',
					message: this.tips[option],
					type: 'success'
				});
			},

		}

	}
</script>

<style>
	.el-dialog__title {
		float: left;
	}

	/* 修复更新的弹出栏的标题居左的bug */
</style>
